import React from "react";
import Chart from "echarts-for-react";
import PublicService from '../../../services/PublicService';
import request from '../../../utils/request';
import echarts from 'echarts'

class LeftTTopTU extends React.Component {

    constructor(props) {
        super(props)
        this.state={
            disList:{}
        }

    }


    componentWillReceiveProps () {
        this.onsave() 
    }
    onsave = () => {
        let data = {
            date:this.props.time
        }
        request({
            url: `/zhrq-web/alarm/common/alarmAmountRanking`,
            method: 'POST',
            data:data
        }).then(data => {
            console.log(data)
            if(data.rc === 0) {
                this.setState({
                    disList:data.ret
                })
            }
        })
    }
    
   
    
    setOption  = () => {
        let data = this.state.disList
        return {
            backgroundColor: '#FFF',
   
            grid: {
                top:"10%",
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
            },
            
                    tooltip: {
                show:"true",
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            xAxis:  {
                 position: "top",
                type: 'value',
                name:"(个)",
                axisTick : {show: false},
                axisLine: {
                    show: false,
                    lineStyle:{
                        color:'#000',
                    }
                },
                splitLine: {
                    show: false
                },
            },
            yAxis: [
                    {
                        type: 'category',
                        axisTick : {show: false},
                        axisLine: {
                            show: false,
                            lineStyle:{
                                color:'#000',
                            }
                        },
                        data: ['广州','深圳','东莞','天津','惠州','北京三级','成都','南京','重庆','长沙']
                    },
                    {
                        type: 'category',
                        axisLine: {show:false},
                        axisTick: {show:false},
                        axisLabel: {show:false},
                        splitArea: {show:false},
                        splitLine: {show:false},
                        data: ['广州','深圳','东莞','天津','惠州','北京三级','成都','南京','重庆','长沙']
                    },
                    
            ],
            series: [
                {
                    name: '有效房源量',
                    type: 'bar',
                    yAxisIndex:1,
                    
                    itemStyle:{
                        normal: {
                            show: true,
                            color: '#FFF6E2',
                            // barBorderRadius:50,
                            borderWidth:0,
                            borderColor:'#333',
                        }
                    },
                    barGap:'0%',
                    barCategoryGap:'50%',
                    data: [300, 300, 300, 300, 300, 300, 300, 300, 300, 300]
                },
                {
                    name: '钥匙量',
                    type: 'bar',
                    itemStyle:{
                        normal: {
                            show: true,
                            color: '#FFD16F',
                            // barBorderRadius:50,
                            borderWidth:0,
                            borderColor:'#333',
                        }
                    },
                    barGap:'0%',
                    barCategoryGap:'50%',
                    data: [32, 52, 41, 64, 15, 10, 32, 25, 210, 32]
                }
               
            ]
        };

        

    }

    render() {
      
        return (

                 <Chart option={this.setOption()} notMerge lazyUpdate style={{height:"27vh"}}
                 echartsInstance={this.save}
                 />
          

         
           
          );
    }
   
}

export default LeftTTopTU;
